<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        body {
            margin: 0;
            overflow: hidden;
        }

        canvas {
            background-color: #000;
            cursor: url(./koala.png), auto;
        }
    </style>
</head>

<body>
    <canvas id="can"></canvas>
    <script>
        const canvas = document.getElementById('can')
        const pen = canvas.getContext('2d')
        let circle_list = []

        function set_size() {
            canvas.width = innerWidth
            canvas.height = innerHeight
        }

        set_size()

        window.onresize = set_size

        class Circle {
            constructor(x, y) {
                this.x = x;
                this.y = y;
                this.offset_x = (Math.random() - 0.5) * 4
                this.offset_y = (Math.random() - 0.5) * 4
                this.opacity = 1
                this.color = '#' + Math.random().toString(16).substr(2, 6)
            }

            update() {
                this.x += this.offset_x
                this.y += this.offset_y
                this.opacity *= 0.99
            }

            draw() {
                pen.beginPath()
                pen.fillStyle = this.color
                pen.globalAlpha = this.opacity
                pen.globalCompositeOperation = 'lighter';
                pen.arc(this.x, this.y, 20, 0, 2 * Math.PI, true)
                pen.fill()

                this.update()
            }
        }

        canvas.onmousemove = function (e) {
            circle_list.push(new Circle(e.x, e.y))
        }

        function render() {
            pen.clearRect(0, 0, innerWidth, innerHeight)
            circle_list.forEach((item, index) => {
                item.draw()
                if (item.opacity < 0.04) {
                    circle_list.splice(index, 1)
                }
            })
            requestAnimationFrame(render)
        }

        render()
    </script>
</body>

</html>